<template>
<div>
    <h1 ref="myh11">App根组件</h1>
    <hr>
    <button type="button" class="btn btn-primary" @click="getRefs">获取$refs引用</button>
    <MyCounter ref="counterRef"></MyCounter>
</div>
</template>

<script>
// 导入组件
import MyCounter from './Counter.vue'
export default{
    name:'MyApp',
    methods: {
        getRefs(){
            // this代表当前组件的实例对象，this.$refs默认指向空对象，this.$refs里面存储着对应的Dom元素或组件的引用
            console.log(this.$refs);
            // 获取对应Dom元素
            this.$refs.myh11.style.color='red'
            console.log(this.$refs.counterRef)
            // 获取组件，并调用组件里面的方法,让count的值为0
            this.$refs.counterRef.reset()
        }
    },
    // 注册组件
    components:{
        MyCounter,
    }
}
</script>

<style lang="less" scoped>
</style>